<template>
  <view class="container">
    <!-- 搜索框 -->
    <search />
    <!-- 轮播图 -->
    <view class="slide">
      <swiper
        class="swiper"
        :indicator-dots="true"
        :autoplay="true"
        :circular="true"
      >
        <swiper-item v-for="item in slideList" :key="item.goods_id">
          <navigator :url="item.navigator_url" :open-type="item.open_type">
            <image
              :src="item.image_src"
              mode="widthFix"
              class="slide-image"
              interval="2000"
              duration="true"
            />
          </navigator>
        </swiper-item>
      </swiper>
    </view>
    <!-- 导航 -->
    <view class="nav">
      <view class="nav_item" v-for="item in navList" :key="item">
        <navigator
          hover-class="none"
          :url="item.navigator_url"
          :open-type="item.open_type"
        >
          <image :src="item.image_src" mode="widthFix" class="nav_img"></image>
        </navigator>
      </view>
    </view>
    <!-- 楼层图片 -->
    <view class="floor" v-for="(item, index) in floorList" :key="index">
      <view class="floor_top">
        <image :src="item.floor_title.image_src" mode="widthFix"></image>
      </view>
      <view class="floor_item">
        <view class="floor_item_left">
          <view class="left">
            <navigator
              hover-class="none"
              :url="item.product_list[0].navigator_url"
              :open-type="item.product_list[0].open_type"
            >
              <image :src="item.product_list[0].image_src"></image>
            </navigator>
          </view>
        </view>
        <view class="floor_item_right">
          <view
            class="hot"
            v-for="(items, index) in item.product_list"
            :key="index"
            v-if="index > 0"
          >
            <navigator
              :url="item.navigator_url"
              :open-type="item.open - type"
              hover-class="none"
            >
              <image :src="items.image_src"></image>
            </navigator>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import search from "component/search.vue";
export default {
  components: {
    search,
  },
  data() {
    return {
      slideList: [],
      navList: [],
      floorList: [],
    };
  },
  onLoad() {
    this.getSlideImg();
    this.getNavImg();
    this.getFloorImg();
  },
  onPullDownRefresh() {
    this.getSlideImg();
    this.getNavImg();
    this.getFloorImg();
  },
  methods: {
    getSlideImg() {
      uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
        success: (res) => {
          const { message } = res.data;
          message.map((item) => {
            if (item.navigator_url) {
              item.navigator_url = item.navigator_url.replace("main", "index");
            }
            return item;
          });
          this.slideList = message;
          //   console.log(message);
        },
      });
    },
    getNavImg() {
      uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems",
        success: (res) => {
          const { message } = res.data;
          message.map((item) => {
            if (item.navigator_url) {
              item.navigator_url = item.navigator_url.replace("main", "index");
            }
            return item;
          });
          this.navList = message;
        },
      });
    },
    getFloorImg() {
      uni.request({
        url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata",
        success: (res) => {
          const { message } = res.data;
          this.floorList = message;
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.swiper {
  height: 340rpx;
  .slide-image {
    width: 750rpx;
    height: 340rpx;
  }
}
.nav {
  margin-top: 12rpx;
  margin-bottom: 40rpx;
  display: flex;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 140rpx;
  /* background-color: #6cf; */
  .nav_item {
    width: 128rpx;
    height: 140rpx;
    /* background-color: #666; */
    .nav_img {
      width: 128rpx;
    }
  }
}
.floor_item {
  display: flex;
  justify-content: space-between;
  padding: 0 12rpx;
}
.floor_top {
  margin-top: 10rpx;
  height: 60rpx;
  width: 750rpx;
  /* background-color: #6cf; */
}
.floor_top image {
  width: 750rpx;
  height: 60rpx;
}
.floor_item_left .left {
  width: 232rpx;
  height: 386rpx;
  /* background-color: #6cf; */
}
.floor_item_left .left image {
  width: 232rpx;
  height: 386rpx;
}
.floor_item_right {
  margin-left: 15rpx;
  /* width: 540rpx; */
  height: 386rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}
.floor_item_right .hot {
  width: 232rpx;
  height: 188rpx;
}
.floor_item_right .hot image {
  width: 232rpx;
  height: 188rpx;
}
</style>